
// let routes = [
//     {
//         path: '/home',
//         component: {
//             template: `<div id="home">home</div>`
//         }
//     },
//     {
//         path: '/Cate',
//         component: {
//             template: `<div>Cate</div>`
//         }
//     }
// ]

// let router = new VueRouter({routes})

// new Vue({
//     router
// }).$mount('#app');



var old = createElement(
    'ul',
    {
        class: 'list'
    },
    [
        createElement(
            'li',
            {
                class: 'list-item',
                style: 'background: orange;'
            },
            [
                '我是第一个元素'
            ]
        ),
        createElement(
            'li',
            {
                class: 'list-item',
                style: {
                    color: 'red'
                }
            },
            [
                createElement(
                    'p',
                    {
                        class: 'item-p'
                    },
                    [
                        '我是p标签'
                    ]
                )
            ]
        ),

        createElement(
            'li',
            {
                class: 'list-item'
            },
            [
                '我是第三个元素'
            ]
        ),
    ]
)



var old2 = createElement(
    'ul',
    {
        class: 'list-wrapper'
    },
    [
        createElement(
            'li',
            {
                class: 'list-item',
                style: 'background: orange;'
            },
            [
                '我是第一个元素'
            ]
        ),
        createElement(
            'li',
            {
                class: 'list-item'
            },
            [
                createElement(
                    'p',
                    {
                        class: 'item-pp'
                    },
                    [
                        '我是pdd标签'
                    ]
                )
            ]
        ),

        createElement(
            'li',
            {
                class: 'list-item'
            },
            [
                '我是第四个元素'
            ]
        ),
    ]
)


console.log(old);
console.log(old2);

var rnode = render(old);

// console.log(rnode)


renderDOM(document.getElementById('app'),  rnode);



var btn = document.getElementById('diff');

btn.onclick = function(){
    
    let patches = diffVnode(old, old2); // patches 补丁包


    console.log(patches);

    updateRealDomByPatches(rnode, patches);
}